<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-show:用于显示隐藏效果，取值是布尔值，true:显示 false：隐藏 -->
        <!-- v-show实现的原理是：动态绑定内联style的样式display：none -->
        <h1 v-show="showBoo">这是一个大大的h1</h1>
        <button @click="clickShow">控制v-show</button>
        <!-- v-if：用于显示隐藏效果，取值是布尔值 -->
        <!-- v-if原理:动态创建、删除元素 -->
        <h2 v-if="ifBoo">这是一个会飘的h2</h2>
        <button @click="clickIf">控制v-if</button>
        <ul>
            <li v-if="age<18">未成年</li>
            <li v-else-if="age<30">青年</li>
            <li v-else-if="age<60">中年</li>
            <li v-else>老年</li>
        </ul>

        <!-- 区别：v-show适合做频繁切换的显示隐藏效果，
        v-if适合初始化条件的渲染的判断，同时适合多条件的判断渲染 -->
        <!-- v-show具有较高的初始化渲染消耗，v-if具有更高的切换性能消耗 -->
    </div>
</body>

</html>
<script src="js/vue3.4.21.js"></script>
<script>
    const {
        createApp,
        ref
    } = Vue


    createApp({
        setup() {
            const showBoo = ref(true)
            const ifBoo = ref(true)
            const age = ref(50)

            function clickShow() {
                showBoo.value = !showBoo.value
            }

            function clickIf() {
                ifBoo.value = !ifBoo.value
            }


            return {
                showBoo,
                clickShow,
                ifBoo,
                clickIf,
                age
            }
        }
    }).mount('#app')
</script>